<template>
	<section>
		<div class="wrap" v-infinite-scroll="loadMore()" :infinite-scroll-disabled="loading"
			infinite-scroll-distance="20">
			<div v-for="(item, index) in list" :key="index" class="div">
				<li>{{item.text}}</li>
			</div>
		</div>
		<section v-show="loadingTip">
			<span>加载中···</span>
		</section>
	</section>
</template>
<script>
	export default {
		data() {
			return {
				loading: false,
				loadingTip: false,
				list: []
			}
		},
		created() {
			console.log("created()");
			const arr = []
			for (let i = 0; i < 20; i++) {
				arr.push({
					time: '2019-7-23:' + i,
					text: `hello${i}`
				})
			}
			this.list = arr;
			this.loadingTip = true
		},
		methods: {
			loadMore() {

				this.loading = true;
				console.log("加载更多数据...");
				this.loading = false;
				console.log("加载/完成...");
				setTimeout(() => {
					console.log("加载数据");
					// const arr = [];
					// for (let i = 0; i < 2; i++) {
					// 	arr.push({
					// 		time: '2019年7月23日:' + i,
					// 		text: `传奇永不息,Legends Never Die`
					// 	})
					// }
					// this.list.push(...arr);
					// this.loading = false;
				}, 2000)
			},
		}
	}
</script>
<style>
	.div {
		height: 50px;
		width: 100%;
		text-align: center;
	}
</style>
